<template>
  <a-modal
    v-model="memoModal"
    title="选择会员"
    centered
    :maskClosable="false"
    @ok="ok"
    @cancel="changememoModal"
  >
    <p v-for="(item, index) in list" :key="index" @click="changeActive(index)" :class="{'is-choose': active === index, 'lists': true}">
      {{item}}
    </p>
  </a-modal>
</template>
<script>
import { mapActions, mapMutations } from 'vuex'
export default {
  data () {
    return {
      list: ['会员1', '会员2', '会员3'],
      active: -1
    }
  },
  methods: {
    ...mapActions(['changeSourceData']),
    ...mapMutations(['changememoModal']),
    // 确定
    ok () {
      if (this.active !== -1) {
        this.changeSourceData(this.list[this.active])
      }
    },
    changeActive (index) {
      this.active = index
    }
  },
  computed: {
    memoModal: {
      get () {
        return this.$store.state.modals.memo.memoModal
      },
      set () {}
    }
  }
}
</script>
<style lang="scss" scoped>
.lists {
  cursor: pointer;
}
.is-choose {
  color: red;
}
</style>
